<template>
  <div class="static-wrap curr-main">
    <el-dialog v-model="centerDialogVisible" title="分配权限" width="500px" center :close-on-click-modal="false">
      <span>
        <el-tree :data="state.tableData" :props="state.defaultProps" show-checkbox />
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="submitForm" type="primary">保 存</el-button>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive,} from 'vue'
import {getMenuList} from '@/api/menuTree'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'userLimit',
  setup(props, { emit }) {
    const state = reactive({
      tableData: <Array<any>>[],
      defaultProps:{
        children: 'children',
        label: 'name',
      }
    })
    const getMenu = async () => {
      // 获取菜单列表
      const { data } = await getMenuList()
      if (data.code === 200) {
        const result = data.data.result
        state.tableData = result
      } else {
        ElMessage({
          message: data.message,
          type: 'error',
          offset: 330,
        })
      }
    }
    const centerDialogVisible = ref(false) //弹窗初始值
    
    //父组件调取子组件的方法
    const open = () => {
      centerDialogVisible.value = true
      getMenu()
    }
    //保存
    const submitForm = () => {
      centerDialogVisible.value = false
    }
    return {
      centerDialogVisible,
      open,
      submitForm,
      state,
      getMenu
    }
  },
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: skyblue;
}
</style>